<template>
  <div class="flex direction-column height-100 tab-panel">
    <div class="search-form">
      <el-form inline>
        <el-form-item label="时间选择">
          <el-date-picker
            type="daterange" :clearable="false"
            v-model="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
            range-separator="至"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="clickQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="loading" class="table" :data="lists" height="100%"
      :header-cell-style="{
        backgroundColor: themeColor,
        color: 'white'
      }"
    >
      <div slot="empty" class="empty-lists">
        <svg-icon name="search"></svg-icon>
        <span class="empty-text">暂无数据</span>
      </div>
      <el-table-column v-for="column in columns" :key="column.prop" v-bind="column">
        <template v-if="column.prop === 'dataCycle'" #default="{ row }">
          {{ row.dataCycle | dataCycleFilter }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination" layout="total,prev,pager,next" style="margin-bottom: 1rem;"
      :hide-on-single-page="true" background
      :current-page.sync="pagination.pageNumber" :page-size="pagination.pageSize"
      :total="pagination.total"
      @current-change="onChange"
    ></el-pagination>
  </div>
</template>

<script>
import { selectTagValueList } from '@/api/indicator'

const api = {
  selectTagValueList,
}
export default {
  name: 'data-panel',
  props: {
    indicatorCode: {
      type: String,
      required: true,
    },
  },
  filters: {
    dataCycleFilter (value) {
      return ({
        0: '实时',
        1: '日数据',
        2: '月数据',
        5: '15分钟',
        6: '10分钟',
        9: '小时',
      })[value]
    },
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    }
  },
  data () {
    const end = this.$dayjs().format('YYYY-MM-DD')
    const start = this.$dayjs().subtract(1, 'year').format('YYYY-MM-DD')
    return {
      daterange: [start, end],
      loading: false,
      lists: [],
      columns: [
        { label: 'ID', prop: 'id' },
        { label: '数据时间', prop: 'dataTime' },
        { label: '数值', prop: 'val' },
        { label: '数据质量', prop: 'quality' },
        { label: '周期', prop: 'dataCycle' },
      ],
      pagination: {
        pageNumber: 1,
        pageSize: 15,
        total: 0,
      },
    }
  },
  mounted () {
    this.query(this.indicatorCode).then(() => {
    })
  },
  methods: {
    clickQuery () {
      this.pagination.pageNumber = 1
      this.$nextTick(() => {
        this.query(this.indicatorCode)
      })
    },
    onChange () {
      this.query(this.indicatorCode)
    },
    query (indicatorCode) {
      this.loading = true
      const daterange = this.daterange
      const startDatatTime = daterange[0]
      const endDatatTime = daterange[1]
      const params = {
        indicatorCode: indicatorCode,
        pageNumber: this.pagination.pageNumber,
        pageSize: this.pagination.pageSize,
        startDatatTime,
        endDatatTime,
      }
      return api.selectTagValueList(params).then(res => {
        if (res.code === 200) {
          this.pagination.total = res.data.total
          this.lists = res.data.records
        }
      }).finally(() => {
        this.loading = false
      })
    },
  },
}
</script>

<style scoped>

</style>
